// 导航栏组件
Vue.component('vanNavBar', {
    template: `
        <div class="van-nav-bar">
            <button @click="$emit('click-left')">返回</button>
            <span>{{title}}</span>
            <button @click="$emit('click-right')">搜索</button>
        </div>
    `,
    props: ['title']
})

// 按钮组件
Vue.component('vanButton', {
    template: `<button class="van-button" @click="$emit('buttonclick')" v-bind:style="{backgroundColor:type}">{{text}}</button>`,
    props: {
        type: {
            type: String,
            validator(val) {
                return ['green', 'red', 'blue', 'gray', 'yellow'].indexOf(val) != -1
            }
        },
        text: String
    }
})


// loading
Vue.component('vanLoading', {
    template: `
    <div class="van-loading" v-show="show">加载中...</div>`,
    props: {
        show: Boolean
    },
})

// 弹框
Vue.component('vanTips', {
    template: `
        <div class="van-tips" v-show="show">{{title}}</div>`,
    props: {
        title: String,
        show: Boolean
    }
})

//表格
Vue.component('vanTable',{
    props:['columns','data'],
    template:`
        <table border=1 cellpadding="20" cellspacing="0">
            <tr>
                <th v-for="item in columns">{{item.title}}</th>
            </tr>
            <tr v-for="item in data">
                <td v-for="col in columns">{{item[col.key]}}</td>
            </tr>
            
        </table>
    `,
    
})